<template>
	<view class="comment-box">
		<view class="comment-header">
			<view class="image">
				<image :src="item.icon" mode="aspectFill" lazy-load></image>
			</view>
			<view class="right">
				<view class="name">{{item.name}}</view>
				<view class="time">{{item.time}}</view>
			</view>
		</view>
		<view class="comment">
			<view class="text">{{item.comment}}</view>
			<view class="img" v-if="item.img">
				<img-preview :setOptions="setOptions"></img-preview>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const {item} = defineProps({
	item:{
		type:Object,
		default:{}
	}
})

const setOptions = ref({
	setHeight:'240rpx',
	setWidth:'240rpx',
	setSrc:item.img
})

</script>
<style scoped lang="scss">
.comment-box:nth-last-child(1) {
}
.comment-box {
	padding: 30rpx 0;
	border-bottom: #dedede solid 1px;
	min-height: 200rpx;
	.comment-header {
		display: flex;
		flex-direction: row;
		gap: 24rpx;
		.image {

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
		.right {
			.name {
			}
			.time {
				color: #999;
			}
		}
	}
	.comment {
		width: 100%;
		.text {
			width: 100%;
			word-wrap: break-word;
			line-height: 50rpx;
			margin-bottom: 10rpx;
		}
		.img {
			border-radius: 20rpx;
		}
	}
}
</style>
<style></style>
